<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8" />
      <title>DOM Level 0 Events - jQuery in Action, 3rd edition</title>
      <link rel="stylesheet" href="../css/main.css"/>
      <style>
         img
         {
            display: block;
            margin: auto;
         }
      </style>
   </head>
   <body>
      <img id="example" src="images/example.jpg" alt="A bolt of lightning"
           onclick="console.log('At ' + formatDate(new Date()) + ' BOOM!');" />

      <p>The output is printed on the console</p>

      <script>
         function formatDate(date) {
            return (date.getHours() < 10 ? '0' : '') + date.getHours() +
                    ':' + (date.getMinutes() < 10 ? '0' : '') + date.getMinutes() +
                    ':' + (date.getSeconds() < 10 ? '0' : '') + date.getSeconds() +
                    '.' + (date.getMilliseconds() < 10 ? '00' : (date.getMilliseconds() < 100 ? '0' : '')) +
                    date.getMilliseconds();
         }

         document.getElementById('example').onmouseover = function(event) {
            console.log('At ' + formatDate(new Date()) + ' Crackle!');
         };
      </script>
   </body>
</html>